<template>

	<view class="header-title">
	   <view class="header-left">
	       <view class="title-box">
	           <text class="title-text">{{title}}</text>
	           <image class="title-icon" mode="aspectFit" :src="titleIcon" v-if="titleIcon"></image>
	       </view>
	       <text class="sub-title" v-if="subtitle">{{subtitle}}</text>
	   </view>
	    <button class="header-right cu-flex-center u-reset-button" :openType="openType" v-if="showOption">
	        <image class="header-right-icon" mode="aspectFit" :src="optionIcon"></image>
	        <text class="header-right-text">{{optionText}}</text>
	    </button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: {
			title: {
				type: String
			},
			titleIcon: {
				type: String,
				default: ""
			},
			subtitle: {
				type: String,
				default: ""
			},
			showOption: {
				type: Boolean,
				default: !0
			},
			optionIcon: {
				type: String,
				default: ""
			},
			optionText: {
				type: String,
				default: "查看更多"
			},
			openType: {
				type: String,
				default: ""
			}
		},
		created: function() {
			//t.loadFontFace({
			//	family: "titleFont",
			//	source: 'url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-senlinjimore/59c98990-1e71-11eb-b997-9918a5dda011.ttf")'
			//});
		},
	}
</script>

<style scoped>
@font-face {
	font-family:"titleFont";
	src: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-senlinjimore/59c98990-1e71-11eb-b997-9918a5dda011.ttf");
}
.header-title{
    width: 750rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 60rpx;
    margin-bottom: 30rpx;
}

.header-left{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
}

.title-box{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.title-text{
    font-size: 44rpx;
    color: #fff;
    font-family: titleFont;
}

.title-icon{
    width: 30rpx;
    height: 30rpx;
    margin-left: 14rpx;
}

.sub-title{
    font-size: 28rpx;
    color: #686868;
    margin-top: 10rpx;
}

.header-right{
    width: 200rpx;
    height: 66rpx;
    background-color: hsla(0,0%,100%,.08);
    border-radius: 66rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.header-right-icon{
    width: 30rpx;
    height: 30rpx;
}

.header-right-text{
    font-size: 26rpx;
    color: #bfbfbf;
    margin-left: 10rpx;
}
</style>
